import Base from "./base.js";
import UsersApi from "../api/admin.js";

export default class extends Base {
    render() {
        this.$el.html(`
        <style>
            html{
                width:100%;
                height:100%;
            }
            body {
                width:100%;
                height:100%;
                background-image: url("resource/login/21fab9895366915c6dd53e51b9630792.jpeg");
                background-repeat: repea;
                background-size: 100% 100%; 
            }
            #app{
                height:100%
            }
            .reg-screen{
                width: 300px;
                padding: 30px;
                font-size: 20px;
                background-color: rgba(255, 255, 255, 0.2);
                position: fixed;
                top:50%;
                left:50%;
                margin-top:-200px;
                margin-left:-150px;
                border-radius:8px;
            }
            </style>
            <div class="reg-screen" style=""> 
            <h1 style=" color:#ffff;display:flex;justify-content: space-between;margin-bottom:10px"> <span style="font-size:22px;">欢迎注册</span><span style="color: #ffff;font-size:14px; align-self:flex-end">已有账号?请&nbsp;&nbsp;
            <button name="login-btn" style="color:#1e9fff; background-color:transparent; font-size:14px; border:none;position:relative;left:-10px;">登录</button>
        </span>  </h1>
           
            <div>
                <input type="text" name="username"  placeholder="请输入账号" class="layui-input" style="margin-bottom:30px">
                <input type="password" name="password" placeholder="请输入密码" class="layui-input" style="margin-bottom:30px">
                <input type="password" name="password" placeholder="请输入手机号" class="layui-input" style="margin-bottom:30px">
            </div>
            <div style="display:flex; justify-content: space-between; margin-bottom:30px">
                <button  class="layui-btn layui-btn-normal ">获取验证码</button>
                <input type="password" name="password" placeholder="请输入验证码" class="layui-input">
            </div>
            <button name="reg-btn" type="button" class="layui-btn layui-btn-normal" style="width:300px">注册</button>
            </div>
       `);
        // 获取用户名输入和密码框输入
        this.$username = $("input[name=username]");
        this.$password = $("input[name=password]");
        // 获取登录注册按钮
        this.$regBtn = $("button[name=reg-btn]");
        this.$loginBtn = $("button[name=login-btn]");
    }

    // 登录事件，跳转到登录页面
    async loginHandle() {
        location.hash = "#/login";
    }

    // 注册事件
    async regHandle(e) {
        let event = e || window.event;
        event.preventDefault();
        // 获取到用户名和密码
        const username = this.$username.val();
        const password = this.$password.val();
        // 当用户名和密码都输入时触发
        if (username.length != 0 && password.length != 0) {
            const status = await UsersApi.reg({
                username,
                password
            }); //传值等待结果
            //根据传回来的status判断注册是否成功  注:需要注意的是status的数据类型
            if (status) {
                layer.msg(`注册成功`, {
                    icon: 1
                });
                location.hash = "#/login";
                return;
            } else {
                window.alert(`账户已存在`);
            }
        } else {
            layer.msg("请输入正确的账号密码");
        }
    }

    // 登录注册按钮绑定事件
    handle() {
        this.$regBtn.on("click", this.regHandle.bind(this));
        this.$loginBtn.on("click", this.loginHandle.bind(this));
        $('html').css('background', "rgb(69,137,148)");
    }
}